<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="订单编号">
                <a-input v-model="queryParam.id" placeholder=""></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder=""></a-input>

              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="订单状态">
                  <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="支付状态">
                  <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                    <a-select-option value="0">全部</a-select-option>
                    <a-select-option value="1">关闭</a-select-option>
                    <a-select-option value="2">运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="物流单号">
                  <a-input v-model="queryParam.id" placeholder=""></a-input>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="queryTable">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"></a-icon>
                </a>
              </span>
            </a-col>
          </a-row>

        </a-form>
      </div>

      <a-table :columns="columns" :dataSource="datas" :pagination="false">
        <a slot="name" slot-scope="text" href="javascript:;">{{ text }}</a>
        <span slot="tags" slot-scope="tags">
          <a-tag v-for="tag in tags" color="blue" :key="tag">{{ tag }}</a-tag>
        </span>
        <span slot="action" >
          <a-dropdown>
            <a class="ant-dropdown-link">
              <a-icon type="ordered-list"></a-icon>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click.prevent="toDetail">订单详情</a>
              </a-menu-item>
              <a-menu-item>
                <a @click.prevent="showModal">发货</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">收货</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">完成订单</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
      <my-pagination
        :total="pagination.totalCount"
        :pageSize="pagination.pageSize"
        :current="pagination.pageNo"
        @onChange="onChangePage"
        @onShowSizeChange="onShowSizeChangePage"
      ></my-pagination>
    </a-card>

    <!--弹窗-->
    <a-modal
      width="50%"
      title="爆款商品编辑"
      :visible="visible"
      okText="确认发货"
      @ok="delivery"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <div>
        <a-form :form="dialogModel">
          <a-form-item
            label="购物清单"
            :label-col="{ span: 5 ,offset: 2}"
            :wrapper-col="{ span: 16 }"
          >
            <a-row>
              <a-col :span="10">123</a-col>
              <a-col :span="14">
                <a-row justify="space-around">
                  <a-col :span="8">东北大米</a-col>
                  <a-col :span="8">20元</a-col>
                  <a-col :span="8">*2</a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item
            label="收货地址"
            :label-col="{ span: 5 ,offset: 2}"
            :wrapper-col="{ span: 16 }"
          >
            <a-row>
              <a-col :span="10">收货人姓名：<span>阿萨德</span></a-col>
              <a-col :span="10">手机号：<span>13333333333</span></a-col>
              <a-col :span="4"></a-col>
            </a-row>
            <a-row>
              <a-col :span="20">省市县：<span>安徽省》合肥市》阿萨德区</span></a-col>
              <a-col :span="4"></a-col>
            </a-row>
            <a-row>
              <a-col :span="20">
                <a-row>
                  <a-col :span="6">详细地址：</a-col>
                  <a-col :span="18">阿萨德asdasdasdas群翁街道12345号1234535室</a-col>
                </a-row>
              </a-col>
              <a-col :span="4"><a-button type="primary" size="small">复制</a-button></a-col>
            </a-row>
          </a-form-item>
          <a-form-item
            label="运单号："
            :label-col="{ span: 5 ,offset: 2}"
            :wrapper-col="{ span: 16 }"
          >
            1234567890987654234
          </a-form-item>
        </a-form>

      </div>
    </a-modal>

  </div>
</template>

<script>
import MyPagination from '../../../components/Autism/myPagination'

const columns = [
  {
    title: '订单编号',
    dataIndex: 'order_no',
    key: 'order_no'
  }, {
    title: '用户手机号',
    dataIndex: 'user_phone',
    key: 'user_phone'
  }, {
    title: '支付单号',
    dataIndex: 'pay_no',
    key: 'pay_no'
  }, {
    title: '订单状态',
    key: 'order_status',
    dataIndex: 'order_status',
    scopedSlots: { customRender: 'tags' }
  }, {
    title: '支付状态',
    key: 'pay_status',
    dataIndex: 'pay_status',
    scopedSlots: { customRender: 'tags' }
  }, {
    title: '买家留言',
    key: 'buyer_message',
    dataIndex: 'buyer_message'
  }, {
    title: '物流单号',
    key: 'tracking_number',
    dataIndex: 'tracking_number'
  }, {
    title: '实付金额',
    key: 'real_pay',
    dataIndex: 'real_pay'
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }]
const datas = [{
  key: 'my_table',
  order_no: '123456',
  user_phone: '13334563456',
  pay_no: '123456789',
  order_status: ['代发货'],
  pay_status: ['已支付'],
  buyer_message: 'wdnmdzz',
  tracking_number: '1234567890098786545',
  real_pay: '123.78'
}]
export default {
  name: 'ProfileBasic',
  components: {
    MyPagination
  },
  data () {
    return {
      dialogModel: this.$form.createForm(this),
      confirmLoading: false,
      visible: false,
      categoryOptions: [ '大米', '豆油', '土豆子' ],
      statusOptions: [ '已上线', '已下线' ],
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentTab: 0,
      advanced: false,
      queryParam: {
      },
      columns,
      datas
    }
  },
  beforeCreate () {},
  create () {},
  mounted () {},
  methods: {
    // 展示弹窗
    showModal () {
      this.visible = true
    },
    // 发货
    delivery () {
      this.confirmLoading = true
      this.dialogModel.validateFields((err, values) => {
        if (!err) {
          console.log(values)
        }
      })
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    toDetail () {
      console.log('wdnmdzz')
    },
    queryTable () {
      console.log(this.queryParam)
    },
    onChangePage (pageNo, pageSize) {
      this.pagination.pageNo = pageNo
      // 重新请求数据
      console.log('on chang page :', pageNo, pageSize)
    },
    onShowSizeChangePage (pageNo, pageSize) {
      this.pagination.pageSize = pageSize
      // 重新请求数据
      console.log('on show size chang page :', pageNo, pageSize)
    },
    categoryChange (selectedItems) {
      console.log(selectedItems)
      this.queryParam.category = selectedItems
    },
    statusChange (selectedItems) {
      console.log(selectedItems)
      this.queryParam.status = selectedItems
    },
    handleCancel () {
      this.visible = false
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  }
}
</script>

<style lang="less" scoped>
</style>
